<template>
  <div>
    <el-form label-width="80px" :model="form">
      <el-form-item label="头像">
        <div class="avater-box">
          <img v-show="form.avater" class="suolueImg" :src="form.avater" />
        </div>
      </el-form-item>

      <el-form-item label="用户名">
        <el-col :span="6">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            :disabled="true"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-col :span="6">
          <el-radio v-model="form.sex" label="男" :disabled="true"></el-radio>
          <el-radio v-model="form.sex" label="女" :disabled="true"></el-radio>
          <el-radio v-model="form.sex" label="保密" :disabled="true"></el-radio>
        </el-col>
      </el-form-item>

      <el-form-item label="个人简介">
        <el-col :span="6">
          <el-input
            type="textarea"
            rows="2"
            maxlength="50"
            v-model="form.desc"
            :disabled="true"
          >
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="手机号">
        <el-col :span="6">
          <el-input v-model="form.phone" :disabled="true"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="电子邮箱">
        <el-col :span="6">
          <el-input
            v-model="form.email"
            placeholder="无"
            :disabled="true"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-col>
          <el-button
            style="marginleft: 60px"
            type="success"
            size="medium"
            @click="$router.push('/admin/users/changePersonal')"
            round
          >
            修改信息
          </el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        avater: "",
        username: "", //用户名
        desc: "", //用户简介
        email: "", //电子邮箱
        phone: "", //手机号
        sex: "", //选择按钮
      },
    };
  },
  created() {
    this.form = this.$store.state.user
  },

  methods: {
  
  },
};
</script>

<style lang="less" scoped>
.avater-box {
  display: flex;
  align-items: center;
  .suolueImg {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
}
</style>